<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的课程列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        body {
            background: #F6F8Fa;
            background-size: 100%;
        }

        .context {
            min-width: 1200px;
            width: 1200px;
            padding-left: 50px;
            padding-right: 50px;
        }

        .courseInfoList {
            margin: 10px auto auto;
            padding-top: 20px;
            min-width: 1200px;
            width: 1200px;
            padding-left: 50px;
            padding-right: 50px;
            min-height: 600px;
            background: #FFFFFF;
            box-shadow: 0 2px 10px 0 rgb(237 238 240 / 50%);
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .courseInfoList li {
            width: 240px;
            height: 300px;
            font-size: 12px;
            box-sizing: border-box;
            color: #a8a8b3;
            overflow: visible;
            cursor: pointer;
            margin-right: 40px;
            margin-bottom: 0;

        }

        .courseInfoList li div img {
            width: 240px;
            height: 200px;
            border-radius: 8px;
        }

        .courseInfoList li .course-info {
            padding: 5px;
        }

        .title {
            margin: 10px auto;
            padding-left: 50px;
            padding-right: 50px;
            min-width: 1200px;
            width: 1200px;
            background: #FFFFFF;
            box-shadow: 0 2px 10px 0 rgb(237 238 240 / 50%);
            border-radius: 8px;
            font-size: 20px;
        }

        #page {
            margin: auto;
            width: 1200px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="context">
    <div class="title">
        <span>我的课程列表</span>
    </div>
    <ul class="courseInfoList">

    </ul>
    <div>
        <div id="page"></div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>
    layui.use(['jquery', 'layer', 'laypage'], function () {
        const $ = layui.jquery
        const laypage = layui.laypage
        const searchParam = {
            current: 1,
            size: 10,
        }

        const createCourseListInfo = (listData) => {
            listData.map(data => createTemplate(data)).map(html => $(".courseInfoList").append(html))
            bindingEvent()
        }

        const bindingEvent = () => {
            $(".learnCourse").on("click", function (event) {
                const target = event.target;
                const courseId = $(target).closest(".learnCourse").children("span").text();
                jumpToTheCourseDetailsPage(courseId)
            })
        }

        // 跳状到课程信息页面
        const jumpToTheCourseDetailsPage = (courseId) => {
            window.location.href = `/index/course/info?courseId=${courseId}`;
        }

        const createTemplate = (data) => {
            return `
            <li class="course c learnCourse" style="display: list-item;">
                <div>
                    <img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="">
                </div>
                <span hidden="hidden" >${data.id}</span>
                <div class="course-info">
                    <h3 class="inlineBlock">
                       <span class="course-name" style="font-size: 16px; font-weight: bold;">${data.name}</span>
                    </h3>
                    <p class="line2 color3">${data.teacherName}</p>
                </div>
            </li>
            `
        }

        const loadCourseList = () => {
            CoreUtil.sendAjax("/study/course/page", searchParam, function (res) {
                //初始化分页器
                loadPageInfo(res.total, searchParam.current);
                //初始化渲染数据
                createCourseListInfo(res.records);
            }, "GET", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
            });
        }

        const loadPageInfo = (count, currentPage) => {
            laypage.render({
                elem: 'page'
                , count: count
                , currentPage: currentPage
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , jump: function (obj, first) {
                    if (!first) {
                        searchParam.current = obj.curr;
                        searchParam.size = obj.limit;
                        loadPageInfo();
                    }
                }
            });
        }

        loadCourseList()
    })
</script>
</html>